<!DOCTYPE html>
<html>

<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../../element-ui-2.13.0/lib/theme-chalk/index.css" />
	<script type="text/javascript" src="../../vue/vue-v2.6.10.js"></script>
	<script type="text/javascript" src="../../element-ui-2.13.0/lib/index.js"></script>
	<script type="text/javascript" src="../../vue/axios-0.18.0.js"></script>
</head>

<body>
	<div id="app">
		<el-tag type="info" effect="dark" v-if="inputVisible" closable="true" :disable-transitions="disable"
			@close="handleClose">用户管理</el-tag>
		<div v-if="inputVisible">
			<template>
				<el-table :data="tableData" @selection-change="handleSelectionChange" size="medium"
					highlight-current-row="true" style="width: 100%">
					<el-table-column type="selection" width="55" prop="uid">
					</el-table-column>
					<el-table-column width="100px" label="序号" type="index">
					</el-table-column>
					<el-table-column label="用户账号" prop="username">
					</el-table-column>
					<el-table-column label="真实姓名" prop="name">
					</el-table-column>
					<el-table-column label="角色" prop="role">
						<template slot-scope="{row}">
							<span v-if="row.role==1">管理员</span>
							<span v-if="row.role==2">总经理</span>
							<span v-if="row.role==3">员工</span>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button size="mini" type="danger" @click="handlelook(scope.$index, scope.row)">详情
							</el-button>
						</template>
					</el-table-column>
					<el-table-column align="left" width="200px">
						<template slot="header" slot-scope="scope">
							<el-input v-model="search1" size="mini" @input="findByPage" placeholder="输入用户名称搜索" />
						</template>
					</el-table-column>
				</el-table>
			</template>
			<br />
			<el-row>
				<el-button type="warning" @click="delAll()">删除选中</el-button>
				<el-button type="primary"><a href="addUser.html" target="main"
						style="text-decoration: none;color:white">添加用户</a></el-button>
			</el-row>
			<template>
				<div class="block" align="right">
					<el-pagination @size-change="handleSizeChange" :slot="tableData"
						@current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[3, 4, 5, 6]"
						:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper, slot"
						:total="totalCount">
					</el-pagination>
				</div>
			</template>
		</div>

		<!-- 	修改 -->
		<el-dialog title="修改用户" :visible.sync="dialogVisible" :close-on-click-modal="false" width="35%">

			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录名" prop="username">
					<el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="性別" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="ruleForm.role" placeholder="请选择活动区域">
						<el-option label="管理员" :value="1"></el-option>
						<el-option label="总经理" :value="2"></el-option>
						<el-option label="用户" :value="3"></el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 详情 -->
		<el-dialog title="用户信息" :visible.sync="dialogVisible1"    :close-on-click-modal="false" width="35%" >
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" disable  label-width="100px" class="demo-ruleForm">
				<el-form-item label="登录名" prop="username">
					<el-input v-model="ruleForm.username" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="ruleForm.password" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名" prop="name">
					<el-input v-model="ruleForm.name" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="ruleForm.phone" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model.number="ruleForm.age" style="width: 210px;"></el-input>
				</el-form-item>
				<el-form-item label="性別" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio :label="0">男</el-radio>
						<el-radio :label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="状态" prop="status">
					<el-radio-group v-model="ruleForm.status">
						<el-radio :label="1">启用</el-radio>
						<el-radio :label="2">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="角色" prop="role">
					<el-select v-model="ruleForm.role" placeholder="请选择活动区域">
						<el-option label="管理员" :value="1"></el-option>
						<el-option label="总经理" :value="2"></el-option>
						<el-option label="用户" :value="3"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="创建时间">
					<el-col>
						<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.createtime"
							style="width:215px;">
						</el-date-picker>
					</el-col>
				</el-form-item>
			</el-form>


		</el-dialog>
	</div>
</body>
<script>
	axios.defaults.withCredentials = true
	new Vue({
		el: "#app",
		data: {
			/*分页相关*/
			tableData: [],//当前页要展示的分页列表数据
			search1: '',//查询条件
			pageSize: 3,//每页显示的记录数
			currentPage: 1,//当前页码
			totalCount: '',//总记录数
			/*批量删除*/
			multipleSelection: [],//批量删除存放选中的复选框
			delarr: [], //存放删除的数据
			/*选项卡*/
			inputVisible: true,
			disable: false,
			/* 对话框 */
			dialogVisible: false,
			dialogVisible1: false,
			ruleForm: {
				uid: '',
				username: '',
				password: '',
				name: '',
				phone: '',
				status: '',
				role: '',
				age: '',
				sex: '',
				createtime: ''
			},
			rules: {
				username: [
					{ required: true, message: '请输入用户名称', trigger: 'blur' },
					{ min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				role: [
					{ required: true, message: '请选择角色', trigger: 'change' }
				],
				name: [
					{ required: true, message: '请输入真实姓名', trigger: 'blur' }
				],
				phone: [
					{
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					},
					{
						validator: function (rule, value, callback) {
							if (/^1[34578]\d{9}$/.test(value) == false) {
								callback(new Error("请输入正确的手机号"));
							} else {
								callback();
							}
						}, trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, {
						min: 6,
						max: 30,
						message: '长度在 6 到 30 个字符'
					}, {
						pattern: /^(\w){6,20}$/,
						message: '只能输入6-20个字母、数字、下划线'
					}
				],
				status: [
					{ required: true, message: '请选择状态', trigger: 'change' }
				],
				sex: [
					{ required: true, message: '请选择性別', trigger: 'change' }
				],
				age: [
					{ required: true, message: '年龄不能为空', trigger: 'blur' },
					{
						validator: function (rule, value, callback) {
							if (!Number.isInteger(value)) {
								callback(new Error('请输入数字值'));
							} else {
								if (value < 18) {
									callback(new Error('必须年满18岁'));
								} else {
									callback();
								}
							}
						}, trigger: 'blur'
					}
				],
				createtime: [
					{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
				],
			},
		},
		methods: {

			// 关闭 
			handleClose() {

				this.inputVisible = false
			},
			// 修改按钮
			handleEdit(index, row) {
				this.dialogVisible = true
				this.ruleForm ={...row}
			},
			// 详情
			handlelook(index, row) {
				// 使用 扩展运算符 拷贝一份数据
				let k = {...row}
				this.ruleForm = k
				// 开启隐藏的框
				this.dialogVisible1 = true
				
					
				
					
			}, // 全选 框
			handleSelectionChange(val) {
				// 把全选框，赋值给删除数组
				 this.delarr =val
			},
			// 选中删除
			delAll() {
					// 把删除数组遍历出来
					let peams = new URLSearchParams();
					for(let i of this.delarr){
						// 追加到 epams 这里
						peams.append("uid",i.uid)
					};
					// 提示用户是否要删除
					if(confirm('确定要删除吗？删除后无法恢复！！')){
						// 向服务器发起请求
						axios.post("http://localhost/user?method=del",peams).then(resp=>{
							// 拿到数据进行判断
						if(resp.data.dece==200){
							this.$message.success(resp.data.message)
						}else{
							this.$message.warning(resp.data.message);
						}
					});					
					}else{
						this.$message.warning('操作已撤销');

					}
					// 跳转
					setTimeout(() => {
						location.href = 'index.html'
					}, 1500);
				
			},
			// 展示 页量
			handleSizeChange: function (size) {
				this.pageSize = size
				this.findByPage();
			},
			// 展示 当前页
			handleCurrentChange: function (currentPage) {
				this.currentPage = currentPage
				this.findByPage();
			},
			 // 分页方法
			findByPage() {
				let peasm = new URLSearchParams();
				peasm.append("search1", this.search1);// search: '',//查询条件
				peasm.append("pageSize", this.pageSize);// pageSize: 3,//每页显示的记录数
				peasm.append("currentPage", this.currentPage);		// currentPage: 1,//当前页码
				//	peasm.append("totalCount",this.totalCount);	// totalCount: '',//总记录数

				// 发送请求
				axios.post("http://localhost/user?method=show", peasm).then(resp => {
					// 给 展示 的数组 赋 值
					this.tableData = resp.data.pageData
					// 总 数量
					this.totalCount = resp.data.total
					//this.search1 = resp.data.pageData.name
				});
			},
			submitForm(formName) {
				 // 表单验证
				 this.$refs[formName].validate(valid=>{
						if(valid){
							let peasm = new URLSearchParams();
								for(let i in  this.ruleForm ){
									peasm.append(i,this.ruleForm[i]);
								} 
								 // 发送请求
								axios.post("http://localhost/user?method=update",peasm).then(resp=>{
										// 判断回传数据是否是200的状态码
										if(resp.data.dece==200){

											this.$message.success(resp.data.message)
										}else{
											this.$message.warning(resp.data.message);
										}
								});

						}else{

							this.$message.warning("表单验证不通过");
						}	
							// 给设置 一个 时间 跳转 
							setTimeout(() => {
								location.href="index.html"
							}, 1000);


					 });

				},

		},
		// 钩子函数 初始
		created() {
			this.findByPage();
		},

	})
</script>

</html>